<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title><base>
<style>

*{
	margin: 0 auto;
}

</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div style="width:100%;background: green;height:100%;">
<div  id="div1" style="float:left;width:25%;background: gray;height:500px;">

</div>

<div   id="div2"  style="float:left;width:50%;height:100%;height:500px;">

    <div id="divL_0"  name ="divconent_0" style="float:left;width:15px;background:red;"></div>
   		<div id="divC_0"  name ="divconent" style="float:left;width:15px;background:green;"></div>
    <div id="divL_1"  name ="divconent_0" style="float:left;width:15px;background:red;"></div>
  		 <div id="divC_1"  name ="divconent"  style="float:left;width:15px;background:green;"></div>
    <div id="divL_2"  name ="divconent_0" style="float:left;width:15px;background:red;"></div>
   		<div id="divC_2"  name ="divconent" style="float:left;width:15px;background:green;"></div>
    <div id="divL_3"  name ="divconent_0" style="float:left;width:15px;background:red;"></div>
  		 <div id="divC_3"  name ="divconent" style="float:left;width:15px;background:green;"></div>
    <div id="divL_4"  name ="divconent_0" style="float:left;width:15px;background:red;"></div>
   
</div>
<div   id="div3"  style="float:left;width:24.9%;background: gray;height:100%;height:500px;">

</div>

</div>

<div id="mather" style="width:30px;height:60px;background:#FFD39B;float:left;display:none;">
  <div style="width:100%;height:10px;font-size:8px;text-align:left;float:left;line-height:10px;">D-II-3</div>
  <div style="width:100%;height:50px;font-size:8px;text-align:left;background:#ffffff;float:left;">
  
  </div>
</div>

<script type="text/javascript">

(function(){
	
	function init(){
		var allwidht= $("body").width();
		//0.04 * 5 + 0.2*4
		var divconentWidth=0.04;
		var divconentWidth_0 = 0.2
		$("#div2").width(allwidht/2);
		var div2width = $("#div2").width();
		$("div[name=divconent_0]").width(div2width*0.001).height(500);  //5个间隔
		$("div[name=divconent]").width(div2width*0.2375-0.2).height(500); //-0.2，javascrpt精度溢出  //四个象限
 		// 一排放三个，则宽度站假定比例的96，四个缝隙占比每个1%。合计为100%
 		var divconent_children_width = $("div[name=divconent]").width()*0.96/3; //每个象限中区域3个，或者
 		var divconent_children_left = $("div[name=divconent]").width()*0.01;  // 4表间隔
 		$("div[name=divconent]").html("");
		for(var i=0;i<15;i++){ 
			var div = $("#mather").clone().height(divconent_children_width*2)
			.width(divconent_children_width)
			.css({"margin-left":divconent_children_left+"px","margin-top":"2px"})
			.show();
			$("#divC_0").append($(div).clone());
		 	$("#divC_1").append($(div).clone());
		 	$("#divC_2").append($(div).clone());
		 	$("#divC_3").append($(div).clone());
		}
		
	}
	
	//计算body加载完成后执行
	$(document).ready(function() { 
		init();
	});	 
	
	 $(window).resize(function(){
		 init();
	 }); 
})();





</script>
</body>
</html>